<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性） 
			1.控制字体：font-family  fongt-size  font-weight
			2.控制文本布局：text-align line-heght letter-spacing word-spacing
			3.文本修饰效果：text-decoration,text-shadow
			4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器{
				         属性: 属性值;
						 属性: 属性值;
						 } 
			*/
		   bo dy div#d1{
			   /* 派生选择器：父亲找儿子【加权】  102*/
			   color: aquamarine;
			   /* 知识点1.文本格式化属性控制字体 
			    font-family:字体家族，指定字体形式
			   */
			   font-family: 华文彩云,sans-serif;
			   /* 设置多个字体：浏览器会按照顺序寻找可用字体 
			   用户系统有什么字体优先使用指定字体
			   通常与通配选择器使用  *{}*/
			   /* 知识点2：文本格式化属性控制字体
				font-size:字体大小属性，与单位共存
				单位： px/em 像素/em相对单位，理解：倍数
				  px 像素 使用特点：绝对值，pc端
				  em 相对单位 使用特点：相对与元素按照倍数方式，移动端
				
				*/
			   /* 知识点3：文本格式化属性控制字体
			   font-weight:字体粗细属性，不存在单位
						 属性值：数值【100 200 300 .... 900】
								常用数值：400
								单词【normal=400,bold[加粗],light[变细]】
				使用方法：通配选择器搭配使用 *{} 指定全局字体正常字体粗细
								
				*/
			    font-size: 1em;
				font-weight: normal;
				/* 补充：1.英文大写；2.首字母大写;3.段落开始间距200px */
				/* text-transform: uppercase; 英文大写 */
				/* text-transform: capitalize; 首字母大写 */
				/* margin-top: 200px; 段落之间间距 */
				/* text-indent: 200px; 段落开始间距 */	
		   }
		   div#d1 { 
			   /* 通过加权的方式，锁定元素  加劝 101 */
			   color: #cbc9ff;
			   /* 知识点4： 文本格式化属性控制文本格式【对齐，间隙】 
			   text-align: 文本对齐属性 
			   left/right/center/justify【两端对齐,用于弹性布局】
			   */
			  text-align: justify;
			  /* 知识点5：文本格式化属性控制文本格式 
			     行高属性：line-height: 文本垂直效果 
				 使用方式：1.高度属性:属性值一致
						  2.在高度属性上加行高：属性值一致
			   */
			  border: 1px solid red;
			  height: 100px;
			  line-height: 100px;
			  /* 补充：文本对齐和行高属于对齐| 间隙 字符和单词之间距离 */
			  /* 知识点6： letter-spacing: 设置字符之间的间隙 
			     知识点7： word-spacing: 设置单词之间间隙
			  */
			 /* letter-spacing: 2px; */
			 word-spacing: 2px;
			 
		   }
		   #d1{
			   color: #aaffff;
		   }
		   
		   
		   
		   a.c1{
			   /* 权值 11 */
			   /* 知识点9：text-decoration 修饰超链接样式
				  使用方法：与通配符一起使用，设置全局页面超链接样式
				  属性值：none|underline|line-through
				   */
				  /* text-decoration: none; */
				  /* text-decoration: underline; 下划线 */
				  /* text-decoration: line-through; 删除线 */
				  
				  /* 知识点10：text-shadow 修饰文本阴影
				   属性值： x轴 y轴 blur模糊 color
				   */
				  text-shadow: 5px 5px 5px #cbc9ff;
		   }
		   p{
			   border: 1px solid red;
			   /* 知识点11： 文本换行效果 
				  white-space: 文本换行属性
				  属性值：nowrap|pre|normal
			   */
			  /* white-space: nowrap; 不换行，只显示一行，超出部分隐藏 */
			  /* white-space: pre; 保存空格和回车 */
			  /* white-space: normal; 默认，空格合并，换行隐藏 */
			  white-space: nowrap;
			  overflow: hhidden;
		   }
		</style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名,添加假文[补全] 
			id选择器【d1】，通过加权方式找到div，添加颜色
		-->
		<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem alias nisi sapiente neque, quisquam inventore soluta pariatur nostrum odio quaerat ducimus voluptas libero pl
		aceat reiciendis doloremque dignissimos. Ad, officia eum?</div>
		<hr />
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点8:text-decoration属性：设置超链接效果
		 -->
		<a class="c1" href="https://tsgzy.edu.cn/col/1654135135174/index.html">实现跳转【方式：6种】</a>
		
		<div style="height: 800px;"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>	
		<p>Lorem    
		ipsum dolor sit amet cons
		ectetur, adipisicing elit. Culpa, odio ducimus?
		 Earum dolorum enim corrupti, provident alias totam sint temporibus aliquid doloribus necessitatibus vitae possimus laboriosam expedita quia dignissimos sapiente! Lorem </p>
		
	</body>
</html>